<template>
  <div class="page">
    <h3>Form Components：Form / FormItem / Input</h3>
    <c-from :model="user" :rules="rules" ref="loginForm">
      <c-from-item label="用户名" prop="username">
        <c-input :refKey="'username'" v-model="user.username">on-typing</c-input>
      </c-from-item>
      <c-from-item label="密码" prop="password">
        <c-input :refKey="'password'" v-model="user.password" type="password"></c-input>
      </c-from-item>
      <c-from-item label="验证码" prop="code">
        <c-input :refKey="'code'" v-model="user.code"></c-input>
      </c-from-item>
      <input type="button" @click="submitForm" value="submit" />
    </c-from>
    <hr />
    <pre>{{user}}</pre>
  </div>
</template>

<script>
import CInput from "../components/form/input.vue";
import CFromItem from "../components/form/formItem.vue";
import CFrom from "../components/form/form.vue";
export default {
  components: {
    CInput,
    CFromItem,
    CFrom
  },
  props: {},
  data() {
    return {
      user: {
        username: "wc",
        password: "",
        code: ""
      },
      rules: {
        username: [
          {
            type: "string",
            required: true,
            validator: (rule, value) => {
              return value.indexOf("wc") != -1;
            },
            message: "用户名有误"
          }
        ],
        password: [{ type: "string", required: true, message: "请输入密码" }],
        code: [{ type: "string", required: true, message: "请输入验证码" }]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    submitForm: function() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          console.log("validate failed:", valid);
          // alert("validate failed:"+JSON.stringify(valid))
        } else {
          console.log("validate succeed");

          // TODO 发送表单提交请求
        }
      });
    }
  },
  created() {},
  mounted() {},
  destroyed() {}
};
</script>
<style lang="scss" scoped>
</style>